
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="content-type" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <title>事故检查</title>

    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/element/index.css">

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="wrapper" v-cloak>
    <!--导航栏-->
    <div class="menuW" style="float: left">
        <div class="sideMenu">
            <div class="head">汽车租赁系统</div>
            <ul>
                <li class="nLi">
                    <h3><i class="fa fa-dashboard"></i>首页<span class="fa fa-angle-up arrow"></span></h3>
                    <ul class="sub">
                        <li><a href="index.html"><i class="fa fa-dashboard"></i>首页</a></li>
                    </ul>
                </li>
                <li class="nLi on">
                    <h3><i class="fa fa fa-dashboard icon"></i>信息展示<span class="fa fa-angle-up arrow"></span>
                    </h3>
                    <ul class="sub">
						<li v-if="authority.indexOf(1) != -1">
							<a href="adminInfo.html"><i class="fa fa-table"></i>超级管理员信息</a>
						</li>
						<li v-if="authority.indexOf(2) != -1">
							<a href="businessInfo.html"><i class="fa fa-table"></i>店员信息</a>
						</li>
						<li v-if="authority.indexOf(3) != -1">
							<a href="userInfo.html"><i class="fa fa-table"></i>顾客信息</a>
						</li>
						<li v-if="authority.indexOf(5) != -1">
							<a href="messageInfo.html"><i class="fa fa-table"></i>留言板</a>
						</li>
						<li v-if="authority.indexOf(6) != -1">
							<a href="checkInfo.html"><i class="fa fa-table"></i>人员检测信息</a>
						</li>
						<li v-if="authority.indexOf(9) != -1">
							<a href="submitInfo.html" class="active"><i class="fa fa-table"></i>事故检查</a>
						</li>
						<li v-if="authority.indexOf(10) != -1">
							<a href="richtextInfo.html"><i class="fa fa-table"></i>政策信息宣传</a>
						</li>
						<li v-if="authority.indexOf(1000001) != -1">
							<a href="advertiserInfo.html"><i class="fa fa-table"></i>通知管理</a>
						</li>
						<li v-if="authority.indexOf(1000009) != -1">
							<a href="typeInfo.html"><i class="fa fa-table"></i>汽车类型</a>
						</li>
						<li v-if="authority.indexOf(1000010) != -1">
							<a href="goodsInfo.html"><i class="fa fa-table"></i>汽车详情管理</a>
						</li>
						<li v-if="authority.indexOf(1000012) != -1">
							<a href="orderInfo.html"><i class="fa fa-table"></i>订单信息</a>
						</li>
						<li v-if="authority.indexOf(1000013) != -1">
							<a href="commentInfo.html"><i class="fa fa-table"></i>评价信息</a>
						</li>

                        <li>
                            <a href="javascript:void(0)" @click="personalPage"><i class="fa fa-user"></i>个人信息</a>
                        </li>
                    </ul>
                </li>
				<li class="nLi">
					<h3><i class="fa fa-table"></i>政策信息宣传<span class="fa fa-angle-up arrow"></span></h3>
					<ul class="sub">
						<li>
							<a href="richtextInfoComment.html"><i class="fa fa-unlock-alt"></i>政策信息宣传评论</a>
						</li>
					</ul>
				</li>

                <li class="nLi">
                    <h3><i class="fa fa-unlock-alt"></i>修改密码<span class="fa fa-angle-up arrow"></span></h3>
                    <ul class="sub">
                        <li>
                            <a href="updatePassword.html"><i class="fa fa-unlock-alt"></i>修改密码</a>
                        </li>
                    </ul>
                </li>
                <li class="nLi">
                    <h3><i class="fa fa-power-off"></i>退出登录<span class="fa fa-angle-up arrow"></span></h3>
                    <ul class="sub">
                        <li>
                            <a href="javascript:void(0)" @click="logout"><i class="fa fa-power-off"></i>退出登录</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- 主体 -->
    <div class="main">
        <!-- 头部开始 -->
        <div class="main-head" style="width: 100%; display: flex">
            <div style="flex: 1; text-align: left">
                <a href="/front/index.html">返回前台首页</a>
            </div>
            <div style="flex: 1; text-align: right">
                <a href="javascript:void(0)" @click="personalPage"><span>您好，<span style="color: #8470FF">{{user.name}}</span></span></a>
                <a href="javascript:void(0)" @click="logout" style="padding:0 10px;">退出登录</a>
            </div>
        </div>
        <!-- 头部结束 -->

        <!-- 主体开始 -->
        <div style="padding: 0 20px">
            <div>
                <div class="table-title">事故检查</div>
            </div>

            <!-- 表格主体-->
            <div style="margin-top: 10px">
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">事故检查表</div>
                            <div class="panel-body">
                                <div class="table-responsive">
                                    <div class="nx-table-header">
                                        <button v-if="isUser" class="btn btn-sm btn-primary" @click="add()">新增</button>
                                    </div>
                                    <table class="table table-striped table-bordered table-hover" style="margin-top: 10px">
                                        <thead>
                                        <tr>
                                            <th>ID</th>
										<th>名称</th>
										<th>提交时间</th>
										<th>事故&检查</th>

                                            <th>提交人</th>
                                            <th>状态</th>
                                            <th>检查结果</th>
                                            <th>审核人</th>
                                            <th v-if="isUpload">文件名</th>
                                            <th v-if="isUpload">上传人</th>
                                            <th v-if="isUpload">文件操作</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody v-for="obj in objs">
                                        <tr>
                                            <td>{{obj.id}}</td>
										<td>{{obj.name}}</td>
										<td>{{obj.time}}</td>
										<td>{{obj.subreason}}</td>

                                            <td>{{obj.userName}}</td>
                                            <td>{{obj.status}}</td>
                                            <td>{{obj.reason}}</td>
                                            <td>{{obj.verifyName}}</td>
                                            <td v-if="isUpload">{{obj.fileName}}</td>
                                            <td v-if="isUpload">{{obj.userName}}</td>
                                            <td v-if="isUpload">
                                                <button class="btn btn-primary btn-xs" @click="viewModal(obj)">预览</button>
                                                <button class="btn btn-success btn-xs" @click="downFile(obj.id)">下载</button>
                                            </td>
                                            <td>
                                                <div v-if="isUser">
                                                    <button class="btn btn-primary btn-xs" @click="init(obj)">编辑</button>
                                                    <button class="btn btn-danger btn-xs" @click="del(obj)">删除</button>
                                                    <button class="btn btn-warning btn-xs" @click="submit(obj)">提交</button>
                                                </div>
                                                <div v-else>
                                                    <button class="btn btn-primary btn-xs" @click="init(obj)">审核</button>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <nav aria-label="Page navigation example">
                                        <ul class="pagination">
                                            <li class="page-item" :class="{ disabled: preActive }">
                                                <a class="page-link" href="javascript:void(0)"
                                                   @click="loadTable(pageInfo.pageNum - 1)">上一页</a>
                                            </li>
                                            <li class="page-item">
                                                <a class="page-link" href="javascript:void(0)" v-if="pageInfo.pageNum > 1" @click="loadTable(pageInfo.pageNum - 1)">{{pageInfo.pageNum - 1}}</a>
                                            </li>
                                            <li class="page-item disabled">
                                                <a class="page-link" aria-disabled="true" href="javascript:void(0)">{{pageInfo.pageNum}}</a>
                                            </li>
                                            <li class="page-item">
                                                <a class="page-link" href="javascript:void(0)" v-if="pageInfo.hasNextPage" @click="loadTable(pageInfo.pageNum + 1)">{{pageInfo.pageNum + 1}}</a>
                                            </li>
                                            <li class="page-item" :class="{ disabled: nextActive }">
                                                <a class="page-link" href="javascript:void(0)" @click="loadTable(pageInfo.hasNextPage? (pageInfo.pageNum + 1) : pageInfo.pageNum)">下一页</a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 表格主体结束-->
        </div>
        <!-- 主体结束 -->
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal" tabindex="-1" role="dialog" id="userModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="modal-title">请填写信息</span>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="entity={}">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal">
                        <input type="hidden" name="id" v-model="entity.id">
						<div class="form-group">
							<label class="col-sm-3 control-label">名称</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" v-model="entity.name" placeholder="请输入名称" id="name">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">提交时间</label>
							<div class="col-sm-7">
								<div class="block">
									<el-date-picker v-model="entity.time" id="time" type="datetime" clearable value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">事故&检查</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" v-model="entity.subreason" placeholder="请输入事故&检查" id="subreason">
							</div>
						</div>

                        <div v-if="isUpload" class="form-group">
                            <label class="col-sm-3 control-label">上传文件</label>
                            <div class="col-sm-7">
                                <div style="margin-top: 8px">
                                    <input id="upload-file-id" @change="upload" type="file" ref="file">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="entity={}">关闭</button>
                    <button type="button" class="btn btn-primary" @click="update()">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal" tabindex="-1" role="dialog" id="adminModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="modal-title">请填写信息</span>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="entity={}">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal">
                        <input type="hidden" v-model="entity.id">
 						<div class="form-group">
							<label class="col-sm-3 control-label">审核结果</label>
							<div class="col-sm-7">
								<label class="radio-inline">
									<input type="radio" value="审核通过" v-model="entity.status">审核通过
								</label>
								<label class="radio-inline">
									<input type="radio" value="审核不通过" v-model="entity.status">审核不通过
								</label>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">检查结果</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" v-model="entity.reason" placeholder="请输入理由">
							</div>
						</div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="entity={}">关闭</button>
                    <button type="button" class="btn btn-primary" @click="update()">保存</button>
                </div>
            </div>
        </div>
    </div>
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    文件预览
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="cancel">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 300px; text-align: center">
                    <img id="view-img" v-if="imgShow" :src="url" alt="" style="width: 400px; ">
                    <video v-if="videoShow" id="video-control" :src="url" controls="controls" style="width: 80%">
                        您的浏览器不支持 video 标签。
                    </video>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/my.js"></script>
<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script src="../js/element/index.js"></script>

<script>
    function msg(type, msg) {
        Vue.prototype.$message({
            type: type, // success（成功）、warning（警告）, error(错误)
            message: msg,
            duration: 2000,
            offset: 100,
            center: true
        })
    }

    new Vue({
        el: '#wrapper',
        data: {

            authority: [],
            permission: [],
            user: {},

            imgShow: false,
            videoShow: true,
            url: '',
            isUpload: false,

            objs: [],
            pageInfo: {},
            preActive: true,
            nextActive: true,
            entity: {},
            isUser: true
        },
        created: function () {
            this.user = JSON.parse(localStorage.getItem("user"));
            if (this.user.level === 1) {
                this.isUser = false;
            }
            this.loadTable(1);

            axios.get("/permission/9").then(res => {
                if (res.data.code === '0') {
                    this.permission = res.data.data;
                } else {
                    msg('error', res.data.msg);
                }
            });

            axios.get("/authority").then(res => {
                if (res.data.code === '0') {
                    this.authority = res.data.data;
                } else {
                    msg('error', res.data.msg);
                }
            });

            // 干掉reserveMap里对应的项，避免下次登录再提示
            // let obj = JSON.parse(localStorage.getItem('submitInfoUserMap'));
            // if (obj !== null) {
            //     let user = JSON.parse(localStorage.getItem('user'));
            //     user.password = '';
            //     delete obj[JSON.stringify(user)];
            //     localStorage.setItem('submitInfoUserMap', JSON.stringify(obj));
            // };

        },
        methods: {
            loadTable(pageNum) {
                axios.get("/submitInfo/page?pageNum=" + pageNum).then(res => {
                    if (res.data.code === '0') {
                        this.objs = res.data.data.list;
                        this.pageInfo = res.data.data;
                        this.preActive = !(this.pageInfo.hasPreviousPage);
                        this.nextActive = !(this.pageInfo.hasNextPage);
                    } else {
                        msg('error', res.data.msg);
                    }
                });
            },
            init(o) {
                if (this.permission.indexOf(3) === -1) {
                    msg('warning', '没有该权限操作');
                    return;
                }
                // 普通用户
                if (this.isUser) {
                    if (o.status === '待审核') {
                        msg('warning', '待审核状态，不可编辑，请等待管理员审核');
                        return;
                    }
                    if (o.status === '审核通过') {
                        msg('warning', '管理员已审核通过，不可编辑');
                        return;
                    }
                    this.entity = JSON.parse(JSON.stringify(o));
                    $('#userModal').modal('show');
                } else {
                    // 管理员
                    if (o.status === '审核通过' || o.status === '审核不通过') {
                        msg('warning', '管理员已审核，不要重复审核');
                        return;
                    }
                    this.entity = JSON.parse(JSON.stringify(o));
                    // 审核状态搞个默认值
                    this.entity.status = '审核通过';
                    $('#adminModal').modal('show');
                }

            },
            add() {
                if (this.permission.indexOf(1) === -1) {
                    msg('warning', '没有该权限操作');
                    return;
                }
                this.entity = {};
                $('#upload-file-id').val('');
                $('#userModal').modal('show');
            },
            update() {
                if (checkValid(this.entity)) {
                    if (!this.entity.id) {
                        axios.post(
                            "/submitInfo", this.entity
                        ).then(res => {
                            if (res.data.code === '0') {
                                msg('success', '添加成功');
                                // 普通用户
                                if (this.isUser) {
                                    $('#userModal').modal('hide');
                                } else {
                                    $('#adminModal').modal('hide');
                                }
                                this.loadTable(1);
                            } else {
                                msg('error', res.data.msg);
                            }
                        })
                    } else {
                        axios.put(
                            "/submitInfo", this.entity
                        ).then(res => {
                            if (res.data.code === '0') {
                                msg('success', '操作成功');
                                $('#adminModal').modal('hide');
                                this.loadTable(1);
                                // 如果是管理员审核提交，需要操作map，如果是用户预约的编辑提交，不需要操作map
                                // let user = JSON.parse(localStorage.getItem('user'));
                                // if (user.level === 1) {
                                //     // 将submitInfoAdminMap中对应的这条数据删除
                                //     let obj = JSON.parse(localStorage.getItem('submitInfoAdminMap'));
                                //     let userStr = obj[this.entity.id];
                                //     delete obj[this.entity.id];
                                //     localStorage.setItem('submitInfoAdminMap', JSON.stringify(obj));

                                //     // 往submitInfoUserMap中写入一条数据，用来通知用户
                                //     let reserveObj = JSON.parse(localStorage.getItem('submitInfoUserMap'));
                                //     if (reserveObj === null) {
                                //         reserveObj = {};
                                //     }
                                //     reserveObj[userStr] = 1;
                                //     localStorage.setItem('submitInfoUserMap', JSON.stringify(reserveObj));
                                // }
                            } else {
                                msg('error', res.data.msg);
                            }
                        })
                    }
                }
            },
            del(o) {
                if (this.permission.indexOf(2) === -1) {
                    msg('warning', '没有该权限操作');
                    return;
                }
                if (o.status === '审核通过' || o.status === '审核不通过') {
                    msg('warning', '管理员已审核，无法删除');
                    return;
                }
                let _this = this;
                this.$confirm('确认删除？', '系统提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'btn-custom-cancel',
                    type: 'warning'
                }).then(function(){
                    axios.delete("/submitInfo/" + o.id).then(res => {
                        if (res.data.code === '0') {
                            msg('success', '删除成功');
                            _this.loadTable(1);
                        } else {
                            msg('error', res.data.msg);
                        }
                    });
                }).catch(function() {
                    console.log("取消成功！");
                });
            },
            submit(data) {
                if (data.status === '待审核') {
                    msg('warning', '不要重复提交，请等待管理员审核');
                    return;
                }
                if (data.status === '审核通过' || data.status === '审核不通过') {
                    msg('warning', '管理员已审核，请勿重复提交');
                    return;
                }
                axios.post(
                    "/submitInfo/submit", data
                ).then(res => {
                    if (res.data.code === '0') {
                        msg('success', '提交成功，等待管理员审核');
                        this.loadTable(1);
                        // 往submitInfoAdminMap里存一条数据，用来通知管理员审核
                        //let obj = JSON.parse(localStorage.getItem('submitInfoAdminMap'));
                        //if (obj === null) {
                        //    obj = {};
                        //}
                        //let user = JSON.parse(localStorage.getItem('user'));
                        //// 把密码置空，防止用户提交之后，又修改密码，导致信息不一致
                        //user.password = '';
                        //obj[data.id] = JSON.stringify(user);
                        //localStorage.setItem('submitInfoAdminMap', JSON.stringify(obj));
                    } else {
                        msg('error', res.data.msg);
                    }
                })
            },
            upload: function () {
                let files = this.$refs.file.files;
                for (let i = 0; i < files.length; i++) {
                    let formData = new FormData();
                    formData.append('file', files[i]);
                    axios.post('/files/upload', formData, {
                        'Content-Type': 'multipart/form-data'
                    }).then(res => {
                        if (res.data.code === '0') {
                            msg('success','文件上传成功');
                            this.entity.fileId = res.data.data.id;
                            this.entity.fileName = res.data.data.originName;
                        } else {
                            msg('error', res.data.msg);
                        }
                    })
                }
            },
            viewModal: function (data) {
                axios.get("/submitInfo/" + data.id).then(res => {
                    if (res.data.code === '0') {
                        let info = res.data.data;
                        this.url = '/files/download/' + res.data.data.fileId;
                        if (/\.(png|jpg|gif|jpeg|webp)$/.test(info.fileName)) {
                            this.imgShow = true;
                            this.videoShow = false;

                            let img = new Image();
                            img.src = this.url;
                            // 加载完成执行
                            img.onload = function(){
                                let scale = img.width / img.height;  // 图片的宽高比
                                let width = 270 * scale;  // 先按照高度等比缩小
                                if(width > 570) {   // 如果缩小后的宽度超出模态框（模态框宽598px），则再次按照宽度等比缩小
                                    let height = 570 / scale;
                                    $('#view-img').css('width', '570px').css('height', height + 'px');
                                } else {
                                    $('#view-img').css('width', width + 'px').css('height', '270px');
                                }
                            };
                        } else if (/\.mp4$/.test(info.fileName)) {
                            this.imgShow = false;
                            this.videoShow = true;
                        } else {
                            msg('warning', '不支持该格式的文件预览');
                            return;
                        }
                        $("#myModal").modal('show');
                    } else {
                        msg('error', res.data.msg);
                    }
                });
            },
            cancel: function () {
                let $video = $("#video-control")[0];
                if($video) {
                    $video.pause();
                }
            },
            downFile: function (id) {
                axios.get("/submitInfo/" + id).then(res => {
                    if (res.data.code === '0') {
                        location.href = '/files/download/' + res.data.data.fileId;
                    } else {
                        msg('error', res.data.msg);
                    }
                });
            },
            logout() {
                logout();
            }
        }
    })
</script>
</body>
</html>
